<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="${contextPath}/js/jquery.min.js"></script>
    <!-- umeditor å¯ææ¬ç¼è¾å¨ -->
    <link rel="stylesheet" href="${contextPath}/css/umeditor/themes/default/css/umeditor.min.css">
    <script src="${contextPath}/css/umeditor/third-party/template.min.js"></script>
    <script src="${contextPath}/css/umeditor/umeditor.config.js"></script>
    <script src="${contextPath}/css/umeditor/umeditor.js"></script>
    <script src="${contextPath}/css/umeditor/lang/zh-cn/zh-cn.js"></script>

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">

    <!--tables Css-->
    <link rel="stylesheet" href="${contextPath}/css/tables.css">
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">å½©ç¥¨åå°ç®¡çç³»ç»</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a href="#">æµç§°å«å°å</a>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown éåºæé®-->
                <li class="dropdown">
                    <a class="btn btn-default" href="#" role="button">éåº</a>
                </li>
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li>
                            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> å¾è¡¨<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="ruleChat.html">è§åå¤§ç±»ç»è®¡</a>
                                </li>
                                <li>
                                    <a href="merchantChat.html">æ¨å¹¿æ¸ éåç»è®¡</a>
                                </li>
                                <li>
                                    <a href="moneyChat.html">ä¸æ³¨éé¢å®æ¶ç»è®¡</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="tables.html"><i class="fa fa-table fa-fw"></i> åå°å®¢æ</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-user fa-fw"></i> å®¢æç®¡ç<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="serviceList.html">å®¢æåè¡¨</a>
                                </li>
                                <li>
                                    <a href="serviceAdd.html">æ·»å å®¢æ</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-headphones fa-fw"></i> å®¢æä¸­å¿<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="userManager.html">ç¨æ·ç®¡ç</a>
                                </li>
                                <li>
                                    <a href="recharge.html">äººå·¥åå¼</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i>è®¾ç½®<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="information.html">ä¸ªäººä¿¡æ¯</a>
                                </li>
                                <li>
                                    <a href="response.html">å¿«æ·åå¤</a>
                                </li>
                                <li>
                                    <a href="robot.html">æºå¨äººè®¾ç½®</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">
            <!--custom service å®¢æå¨è¯¢-->
            <div class="row custom-service">
                <div class="col-md-3 col-lg-3">
                    <div class="row serverUser-list">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active col-xs-6">
                                <!--æ¥å¾reception-->
                                <a href="#reception" data-toggle="tab">
                                    æ¥å¾ï¼20ï¼
                                </a>
                            </li>
                            <!--æéqueue-->
                            <li class="col-xs-6">
                                <a href="#queue" data-toggle="tab">
                                    æéï¼10ï¼
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="reception">
                                <!--æ¥å¾ä¾§æ -æ¥å¾ç¨æ·åè¡¨-->
                                <ul class="reception-users">
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">999</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                            <p class="reception-users-name">Alax Yang</p>
                                            <p class="reception-users-words">è¯·é®æç°ä»ä¹...</p>
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                    </li>




                                </ul>
                            </div>
                            <div class="tab-pane fade" id="queue">
                                <ul class="queue-users">
                                    <li class="row">
                                        <div class="col-xs-4 hidden-md queue-users-imgBox">
                                            <img src="../images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 queue-users-msg">
                                            <p class="queue-users-name">æéç¨æ·å</p>
                                            <p class="queue-users-words">æéç¨æ·å¯¹è¯</p>
                                        </div>
                                        <a href="javascript:;"><i class="queue-users-status">åç</i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- serveringæå¡å¯¹è¯æ¡ -->
                <div class="col-md-6 col-lg-6 servering">
                    <div class="servering-header">
                        ç¨æ·åï¼æ­£å¨å¨è¯¢...ï¼
                    </div>
                    <div class="servering-conversation">
                        <div class="media-list">
                            <div class="reply-description">
                                æºå¨äººèå¤©è®°å½
                            </div>

                            <div class="media customer-service-response">
                                <div class="media-body">
                                    æ¨å¥½ï¼è¯·é®æä»ä¹å¯ä»¥å¸®å©æ¨çï¼
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="../images/userImg.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                            </div>
                            <div class="reply-description reply-description-history">
                                ä»¥ä¸ä¸ºåå²è®°å½
                            </div>
                            <div class="reply-description">
                                00:00ç¨æ·è¿å¥
                            </div>
                            <div class="media users-response">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="../images/userImg.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    è¯·é®ç°å¨æç°ä¸è¬ä»ä¹æ¶åå°ï¼
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="servering-msg">
                        <!-- å¯ææ¬ç¼è¾å¨ -->
                        <script id="editor-container" name="content" type="text/plain"></script>
                        <div class="row sending-btn-box">
                            <a href="#" class="btn btn-large btn-primary sending-btn col-xs-2 col-xs-push-10">åé</a>
                        </div>

                    </div>
                </div>
                <!-- å½åç¨æ·è´­å½©è®°å½ -->
                <div class="col-md-3 col-lg-3 purchase-history">
                    <div class="purchase-history-header">
                        TAçå½©è´­è®°å½
                    </div>
                    <div class="purchase-history-list">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="purchase-history-item">
                                        ç¬¬xxxxxxxxæ
                                        <span class="fa arrow"></span>
                                        </a>

                                    </h4>
                                </div>
                                <div id="collapse1" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>è®¢åéé¢&nbsp;&nbsp;<span>2å</span></p>
                                        <p>è®¢åç¶æ&nbsp;&nbsp;<span>æªä¸­å¥</span></p>
                                        <p>ä¸­å¥éé¢&nbsp;&nbsp;<span>0.00å</span></p>
                                        <p>éå·ç±»å«&nbsp;&nbsp;<span>å¤§å°åå</span></p>
                                        <p>ä¸åæ¶é´&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="purchase-history-item">
                    ç¬¬xxxxxxxxæ
                    <span class="fa arrow"></span>
                </a>
                                    </h4>
                                </div>
                                <div id="collapse2" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>è®¢åéé¢&nbsp;&nbsp;<span>2å</span></p>
                                        <p>è®¢åç¶æ&nbsp;&nbsp;<span>æªä¸­å¥</span></p>
                                        <p>ä¸­å¥éé¢&nbsp;&nbsp;<span>0.00å</span></p>
                                        <p>éå·ç±»å«&nbsp;&nbsp;<span>å¤§å°åå</span></p>
                                        <p>ä¸åæ¶é´&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="purchase-history-item">
                    ç¬¬xxxxxxxxæ
                    <span class="fa arrow"></span>
                </a>

                                    </h4>
                                </div>
                                <div id="collapse3" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>è®¢åéé¢&nbsp;&nbsp;<span>2å</span></p>
                                        <p>è®¢åç¶æ&nbsp;&nbsp;<span>æªä¸­å¥</span></p>
                                        <p>ä¸­å¥éé¢&nbsp;&nbsp;<span>0.00å</span></p>
                                        <p>éå·ç±»å«&nbsp;&nbsp;<span>å¤§å°åå</span></p>
                                        <p>ä¸åæ¶é´&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- åé¡µ -->
                        <div class="pagination-box">
                            <div>~æ²¡ææ´å¤è®°å½~(ä¸åé¡µäºéä¸)</div>
                            <ul class="pagination">
                                <li><a href="#">&laquo;</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>

                        </div>

                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Bootstrap Core JavaScript -->
    <script src="${contextPath}/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${contextPath}/js/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${contextPath}/js/sb-admin-2.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        $(function() {
            $('[data-toggle="popover"]').popover()
        });

        // å³æ ç®­å¤´åæ¢
        $('#collapse1').collapse('hide');
        $('.panel-title>a').each(function(index, item) {
                index = index + 1;
                $('#collapse' + index).on('shown.bs.collapse', function() {
                    $(this).parent().find('.arrow').addClass("arrow-rotate")
                    console.log($('#collapse' + index))
                });
                $('#collapse' + index).on('hide.bs.collapse', function() {
                    $(this).parent().find('.arrow').removeClass("arrow-rotate")
                })
            })
            // ä¸»æ å¯ææ¬ç¼è¾å¨å®å¶å·¥å·æ 
        window.um = UM.getEditor('editor-container', {
            /* ä¼ å¥éç½®åæ°,å¯éåæ°åè¡¨çumeditor.config.js */
            toolbar: [
                'undo redo | bold italic underline',
                'emotion',
                'simpleupload',
            ]
        });
    </script>

</body>

</html>

</html>